<template>
	<view class="page-container">
		<!-- 顶部导航栏 -->
		<view class="header">
			<x-status-bar></x-status-bar>
			<view class="flex-center-between header-navbar">
				<x-back-btn></x-back-btn>
				<view class="u-f-40 common-title">{{ lang_shop.staffMessage }}</view>
				<view class="u-f-28 u-lh-40 font-medio" @click="completeAction">{{ lang_common.complete }}</view>
			</view>
		</view>

		<!-- 列表 -->
		<view>
			<view style="padding: 10rpx 34rpx;">
				<view class="card-box u-m-t-10 flex-center-between">
					<view class="u-f-32 u-lh-44 font-medio">{{ lang_shop.staffAvatar }}</view>
					<view class="u-m-t-8 clear-flex">
						<x-avatar selWidth="94rpx" selHeight="94rpx" 
							:avatar-src="showImage(form.imgUrl)"
							avatarStyle="width: 94rpx; height: 94rpx; border-radius: 94rpx;" inner="true"
							@upload="myUpload"
							@fail="settingValue = 'camera'"></x-avatar>
					</view>
				</view>

				<view class="card-box u-m-t-10">
					<view class="u-f-32 u-lh-44 font-medio">{{ lang_shop.staffName }}</view>
					<view class="u-m-t-8">
						<input v-model="form.name" :placeholder="lang_shop.staffNameTips" maxlength="10" />
					</view>
				</view>

				<view class="card-box u-m-t-10">
					<view class="u-f-32 u-lh-44 font-medio">{{ lang_shop.staffJob }}</view>
					<view class="u-m-t-8">
						<input v-model="form.jobTitle" :placeholder="lang_shop.staffJobTips" maxlength="15" />
					</view>
				</view>

				<view class="card-box u-m-t-10">
					<view class="u-f-32 u-lh-44 font-medio">{{ lang_shop.staffIntroduce }}</view>
					<view class="u-m-t-8">
						<input v-model="form.desc" :placeholder="lang_shop.staffIntroduceTips" maxlength="20" />
					</view>
				</view>

				<view class="card-box u-m-t-10">
					<view class="u-f-32 u-lh-44 font-medio">{{ lang_shop.staffLikeItem }}</view>
					<view class="u-m-t-37">
						<view v-for="(item, index) in serviceList" :key="index" :class="['tag-item u-m-b-30 u-m-r-20',
						dealActive(item) ? 'tag-item-active color-red-dep' : 'color-grew']" @click="changeItem(item)">
							{{ item }}
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 留空 -->
		<view style="height: 200rpx"></view>

		<u-modal v-model="visible" :show-title="false" show-cancel-button :content="lang_shop.staffUnSaveTips"
			:cancel-text="lang_common.cancel" :confirm-text="lang_common.done" :confirm-color="'#FD1E43'"
			@confirm="comfirmAction" @cancel="visible = false" z-index="9999999">

		</u-modal>
		
		<permission-unAuthTips v-model="settingValue"></permission-unAuthTips>
	</view>
</template>

<script>
	import upload from '@/utils/upload.js'
	import { Info } from '@/api/base.js'
	import {
		merchantAddStaff,
		merchantUpdateStaff,
		merchantStaffInfo
	} from '@/api/merchant/merchant.js'
	export default {
		data() {
			return {
				defaultForm: {},
				form: {
					imgUrl: '',
					name: '',
					jobTitle: '',
					desc: '',
					expertItems: []
				},
				serviceList: [],
				type: 'add',
				merchantStaffId: '',

				visible: false,
				authPass: true,
				
				settingValue: '',
				
				isClick: false,
			}
		},
		watch: {
			form: {
				handler(v) {
					this.authPass = JSON.stringify(this.form) === this.defaultForm
				},
				deep: true
			}
		},
		onBackPress() {
			if (this.authPass) {
				return false
			}
			this.visible = true
			return true
		},
		created() {
			this.defaultForm = JSON.stringify(this.form)
		},
		// 获取类型
		onLoad({
			merchantStaffId,
			type
		}) {
			this.merchantStaffId = merchantStaffId
			this.type = type || 'add'
			if (this.type === 'update') {
				this.initInfo()
			}
			this.initExpert()
		},
		methods: {
			// 获取上传后的图片地址
			myUpload(res) {
				upload(({
					filePath: res.path,
					type: 'avatar'
				}), result => {
					if (result.status === 'complete') {
						this.$set(this.form, 'imgUrl', result.msg.path)
					}
				})
			},
			// 右上角表单按钮点击后触发
			completeAction() {
				let queryObj = {
					...this.form,
					expertItems: this.form.expertItems.join(',')
				}
				let keys = [{
						key: 'imgUrl',
						tipsKey: 'staffAvatarTips'
					},
					{
						key: 'name',
						tipsKey: 'staffNameTips'
					},
					{
						key: 'jobTitle',
						tipsKey: 'staffJobTips'
					},
					{
						key: 'desc',
						tipsKey: 'staffIntroduceTips'
					},
					{
						key: 'expertItems',
						tipsKey: 'staffLikeItemTips'
					}
				]
				for (let i = 0, len = keys.length; i < len; i++) {
					let {
						key,
						tipsKey
					} = keys[i]
					if (!queryObj[key]) return this.$api.msg(this.lang_shop[tipsKey])
				}
	
				if (this.isClick) return;
				this.isClick = true
				
				let queryFn = fn => fn(queryObj).then(() => {
					uni.$emit('update-shop-staff-list')
					this.$api.msg('提交成功')
					this.authPass = true
					let timer = setTimeout(() => {
						this.isClick = false
						this.jumpBack()
					}, 1000)
				}).catch(() => {
					this.isClick = false
				})
				queryFn(this.type === 'add' ? merchantAddStaff : merchantUpdateStaff)
			},
			// 处理列表是否和另外一个列表是否存在相同的值
			dealActive(item) {
				return this.form.expertItems.includes(item)
			},
			// 处理激活和取消激活
			changeItem(item) {
				let index = this.form.expertItems.findIndex(label => item == label)
				if (index > -1) {
					this.form.expertItems.splice(index, 1)
				} else {
					this.form.expertItems.push(item)
				}
			},
			//  取消保存表单信息
			comfirmAction() {
				this.authPass = true;
				this.jumpBack()
			},
			// 初始化详情
			initInfo() {
				merchantStaffInfo({
					merchantStaffId: this.merchantStaffId
				}).then((data) => {
					console.log(data)
					let keys = ['staffId', 'imgUrl', 'name', 'jobTitle', 'desc', 'expertItems']
					let obj = {}
					keys.map(item => {
						obj[item] = data[item]
					})
					obj.expertItems = obj.expertItems.split(',')
					this.defaultForm = JSON.stringify({
						...obj
					})
					this.form = {
						...obj
					}
				})
			},
			// 初始化商家员工特长
			initExpert() {
				Info({ key: 'key.expert.items' }).then((result) => {
					this.serviceList = result.content.split(',')
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.card {
		&-box {
			padding: 20rpx 24rpx;
			border-radius: 4rpx;
			background-color: #FFFFFF;
		}
	}

	.file {
		&-box {
			position: relative;
			width: 200rpx;
			height: 200rpx;
			background-color: #f9f9f9;
			border-radius: 34rpx;
		}

		&-close {
			position: absolute;
			top: 0;
			right: 0;
		}
	}

	.tag {
		&-item {
			display: inline-block;
			padding: 8rpx 36rpx;
			border: 2rpx solid #FAFAFA;
			background-color: #FAFAFA;
			border-radius: 100rpx;

			&-active {
				@extend .tag-item;
				border-color: #FD1E43;
				background-color: rgba(253, 30, 67, 0.15);
			}
		}
	}
</style>
